<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单管理系统</title>
  <link href="/css/bootstrap.css" rel="stylesheet">
  <script src="/js/bootstrap.bundle.js"></script>
  <style>
      body {
          padding-top: 56px;
      }
      .sidebar {
          height: 100%;
          width: 250px;
          position: fixed;
          top: 56px;
          left: 0;
          background-color: #f8f9fa;
          padding-top: 20px;
      }
      .sidebar a {
          padding: 10px 15px;
          text-align: left;
          display: block;
          color: #000;
          text-decoration: none;
      }
      .sidebar a:hover {
          background-color: #ddd;
          color: black;
      }
      .content {
          margin-left: 250px;
          padding: 20px;
      }
  </style>
</head>

<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">订单管理系统</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
          aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">欢迎您，管理员（ID: <span th:text="${session.name}"></span>）</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" data-bs-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
          设置
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="settingsDropdown">
          <div th:if="${session.isTotalAdmin}">
            <a class="dropdown-item" th:href="@{/inventory}">进入仓库管理</a>
            <a class="dropdown-item" th:href="@{/user/sysAdmin}">进入系统管理</a>
            <div class="dropdown-divider"></div>
          </div>
          <a class="dropdown-item" th:href="@{/logout}">退出登录</a>
          <a class="dropdown-item" href="#" onclick="location.reload();">刷新页面</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!-- Sidebar -->
<div class="sidebar">
  <a th:href="@{/order}">全部订单信息</a>
  <a th:href="@{/order/query}">订单查询</a>
  <a th:href="@{/order/manage}">订单管理</a>
  <a th:href="@{/order/reminder}">临近截至订单提醒</a>
  <a th:href="@{/order/demand}">需求原料</a>
  <a th:href="@{/order/supplier}">供应商管理</a>
</div>
<div class="content">
  <div id="supplierSection" class="section">
    <h3>供应商管理</h3>
    <!--供应商查询表单-->
    <form th:action="@{/supplier/query}" method="post">
      <div class="form-group" >
        <label for="supplierName">供应商名</label>
        <input type="text" class="form-control" id="supplierName" name="supplierName">
      </div>
<!--      <div class="form-group">-->
<!--        <label for="supplierMaterial">提供原料</label>-->
<!--        <input type="text" class="form-control" id="supplierMaterial" name="supplierMaterial">-->
<!--      </div>-->
      <button type="submit" class="btn btn-primary mt-4">查询</button>
      <button type="button" class="btn btn-success mt-4" onclick="showSupplierModal()">新增供应商</button>
      <th:block th:if="${createError}">
        <p style="color: red;">供应商已存在！</p>
      </th:block>
    </form>
    
    
    <table class="table mt-4">
      <thead>
      <tr>
        <th>供应商名称</th>
<!--        <th>所供应的原料名</th>-->
<!--        <th>均价</th>-->
        <th>评分</th>
        <th>地址</th>
        <th>联系方式</th>
      </tr>
      </thead>
      <tbody>
      <!-- 供应商数据 -->
      <!--thymeleaf-->
      <tr th:each="supplier : ${supplierQuery}">
        <td th:text="${supplier.getSupplierName()}"></td>
        <!--                <td th:text="${supplier['material_name']}"></td>-->
        <!--                <td th:text="${supplier['average_unit_price']}"></td>-->
        <td th:text="${supplier.getMark()}"></td>
        <td th:text="${supplier.getPlace()}"></td>
        <td th:text="${supplier.getPhone()}"></td>
        
      </tr>
      </tbody>
    </table>
    
    
    <!-- Modals -->
    <div class="modal fade" id="supplierModal" tabindex="-1" aria-labelledby="supplierModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="supplierModalLabel">新增供应商</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!--新增供应商表单-->
            <form th:action="@{/supplier/create}" method="post">
              <div class="form-group">
                <label for="newSupplierName">供应商名</label>
                <input type="text" class="form-control" id="newSupplierName" name="newSupplierName" required>
              </div>
              <div class="form-group">
                <label for="newSupplierAddress">供应商地址</label>
                <input type="text" class="form-control" id="newSupplierAddress" name="newSupplierAddress" required>
              </div>
              <div class="form-group">
                <label for="newSupplierContact">供应商联系方式</label>
                <input type="text" class="form-control" id="newSupplierContact" name="newSupplierContact">
              </div>
              <button type="submit" class="btn btn-primary">确定</button>
            </form>
          
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>
<script>
    function showSupplierModal() {
        var modal = new bootstrap.Modal(document.getElementById('supplierModal'));
        modal.show();
    }
</script>

</body>
</html>